<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DECP后台管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/css/public.css" >
    <link rel="stylesheet" href="/admin/css/common.css" />
    <link rel="stylesheet" href="/layui/css/layui.css" />
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" name="realName" placeholder="" class="layui-input">
                </div>
                <label class="layui-form-label">账号</label>
                <div class="layui-input-inline">
                    <input type="text" name="username" placeholder="" class="layui-input">
                </div>
                <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
                    <i class="layui-icon layui-icon-search"></i>
                    查询
                </button>
                <button type="reset" class="pear-btn pear-btn-md">
                    <i class="layui-icon layui-icon-refresh"></i>
                    重置
                </button>
            </div>
        </form>
    </div>
</div>
<div class="layui-card">
    <div class="layui-card-body">
        <table class="layui-table"
               lay-data="{ cellMinWidth: 80, page: true,id:'tableId', limit:10, url:'sysUser/queryPage', defaultToolbar: [{
                layEvent: 'refresh',
                icon: 'layui-icon-refresh',
            }, 'filter', 'print', 'exports'],skin: 'line',toolbar: '#user-toolbar'}" lay-filter="demo">
            <thead>
            <tr>
                <th lay-data="{type:'checkbox', fixed: 'left'}">ID</th>
                <th lay-data="{field:'userId', sort: true,width:60}">ID</th>
                <th lay-data="{field:'userCode'}">用户帐号</th>
                <th lay-data="{field:'userName'}">用户名</th>
                <th lay-data="{field:'userPhone'}">手机号</th>
                <th lay-data="{field:'userSex'}">性别</th>
                <th lay-data="{field:'userCreationDate'}">创建时间</th>
                <th lay-data="{field:'userActivate',templet: '#switchTpl',width:100}">状态</th>
                <th lay-data="{field:'option', fixed: 'right',width:200,  align: 'center',toolbar:'#optionTp1',unresize: true}">
                    操作
                </th>
            </tr>
            </thead>
        </table>
    </div>
</div>
<script type="text/html" id="user-toolbar">
    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
    <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
        <i class="layui-icon layui-icon-delete"></i>
        删除
    </button>
</script>
<script type="text/html" id="optionTp1">
    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="detail">
        分配角色
    </button>
</script>

<script src="/js/layui/layui.all.js"></script>

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['table', 'jquery', 'form'], function () {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;
        var userActivate = 0;
        var userId = 0;

        table.on('tool(demo)', function(obj){
            var data = obj.data;

            if(obj.event === 'detail'){
                var  data = obj.data;
//                layer.msg("更新");
                parent.layer.open({
                    type: 1
                    , area: ['500px', '600px']
                    , title: '分配角色'
                    , resize: false
                    , offset: 'auto' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                    , userId: data.userId //防止重复弹出，写主键Id
                    , content: '<iframe frameborder="0" width="100%" height="100%" src="send_sys_user_userRole"/>'
                    , end: function () {
                        //窗口关闭，刷新列表
                        table.reload("tableId", {});
                        top.layerFrameConfig.iframeUserModify == null;
                    }, success: function (layero, index) {
                        top.layerFrameConfig.iframeUserModify = {
                            layer_index: index,
                            layer_layero: layero,
                            data: data //将数据保存到配置中，便于子页面获取
                        }
                    },cancel : function() {
                        // 你点击右上角 X 取消后要做什么
                        table.reload("tableId", {});
                        top.layerFrameConfig.iframeUserModify == null;
                    }
                });
            }


        });

            table.on('toolbar(demo)', function(obj){
            if(obj.event=='add'){
                var  data = obj.data;
//                layer.msg("更新");
                parent.layer.open({
                    type: 1
                    , area: ['500px', '600px']
                    , title: '新增用户'
                    , resize: false
                    ,shadeClose:true
                    ,scrollbar:false
                    , offset: 'auto' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                    , content: '<iframe frameborder="0" width="100%" height="100%" src="send_sys_user_save"/>'
                    , end: function () {
                        //窗口关闭，刷新列表
                        table.reload("tableId", {});
                        top.layerFrameConfig.iframeUserModify == null;
                    }, success: function (layero, index) {
                        top.layerFrameConfig.iframeUserModify = {
                            layer_index: index,
                            layer_layero: layero,
                            data: data //将数据保存到配置中，便于子页面获取
                        }
                    }
                });
            }

        });
//

        form.on('switch(userActivate)', function (obj) {
            //layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
            // console.log(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
            //console.log($(this).parent().parent().siblings("userId"));

            //  obj =$(".layui-table-hover")[0].find('#users');


            userActivate = obj.elem.checked;
            userId = $(this).data('user-id');



            console.log(userId + "========================-------------------" + obj.elem.checked);
            $.ajax({
                url: "sysUser/modifyUserStatus",
                data: {userActivate: userActivate, userId: userId},
                datatype: "json",
                type: "post",
                success: function (layero, index) {
                    top.layerFrameConfig.iframeUserModify = {
                        layer_index: index,
                        layer_layero: layero,
                        // data: data[0] //将数据保存到配置中，便于子页面获取
                    }
                }, error: function () {
                    //窗口关闭，刷新列表
                    table.reload("tableId", {});
                    top.layerFrameConfig.iframeUserModify == null;
                }
            });
        });


//            //监听激活状态


        var active = {

            userSave: function () { //添加
                parent.layer.open({
                    type: 1
                    , area: ['500px', '500px']
                    , title: '添加用户信息'
                    , resize: false
                    , offset: 'auto' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                    // , id: data[0].id //防止重复弹出，写主键Id
                    , content: '<iframe frameborder="0" width="100%" height="100%" src="send_sys_user_save"/>'
                    , end: function () {
                        //窗口关闭，刷新列表
                        table.reload("tableId", {});
                        top.layerFrameConfig.iframeUserModify == null;
                    }, success: function (layero, index) {
                        top.layerFrameConfig.iframeUserModify = {
                            layer_index: index,
                            layer_layero: layero,
                            // data: data[0] //将数据保存到配置中，便于子页面获取
                        }
                    }
                });

            },

            userModify: function () { //更新
                var checkStatus = table.checkStatus('tableId')
                    , data = checkStatus.data;

//                layer.msg("更新");
                if (data.length == 1) {
                    parent.layer.open({
                        type: 1
                        , area: ['500px', '500px']
                        , title: '更新系统用户信息'
                        ,shade:0.1
                        ,maxmin:true
                        , resize: false
                        , offset: 'auto' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                        , id: data[0].id //防止重复弹出，写主键Id
                        , content: '<iframe frameborder="0" width="100%" height="100%" src="send_sys_user_modify"/>'
                        , end: function () {
                            //窗口关闭，刷新列表
                            table.reload("tableId", {});
                            top.layerFrameConfig.iframeUserModify == null;
                        }, success: function (layero, index) {
                            console.log(top.layerFrameConfig)
                            top.layerFrameConfig.iframeUserModify = {
                                layer_index: index,
                                layer_layero: layero,
                                data: data[0] //将数据保存到配置中，便于子页面获取
                            }
                        }
                    });
                } else {
                    layer.msg("请选择一条数据进行更新");
                }

            },
            userRemove: function () { //删除
                var checkStatus = table.checkStatus('tableId')
                    , data = checkStatus.data;
                var ids = "";
                for (var i = 0; i < data.length; i++) {
                    ids += data[i].userId + ",";
                }
                ids = ids.substring(0, ids.lastIndexOf(","));
                var msg = "您真的确定要删除吗？\n\n请确认！";


                if(ids!=null && ids!=''){
                    parent.layer.confirm(msg,{
                        btn:["确定","取消"]
                    },function () {
                        $.ajax({
                            async:false,
                            url: "sysUser/delActivate",
                            data: {userActivate: 2, userId: ids},
                            datatype: "json",
                            type: "post",
                            success: function (layero, index) {
                                top.layerFrameConfig.iframeUserModify = {
                                    layer_index: index,
                                    layer_layero: layero,
                                    // data: data[0] //将数据保存到配置中，便于子页面获取
                                }
                            }, error: function () {
                                //窗口关闭，刷新列表
                                table.reload("tableId", {});
                                top.layerFrameConfig.iframeUserModify == null;
                            }
                        });
                    },function () {
                        parent.layer.close();
                    });
                }
                else {
                    layer.msg("请选择一条数据进行更新");
                }
            },
            updaPwd:function () {
                var checkStatus = table.checkStatus('tableId')
                    , data = checkStatus.data;
                if (data.length == 1) {
                    parent.layer.open({
                        type: 1
                        , area: ['400px', '400px']
                        , title: '修改用户密码'
                        , resize: false
                        , offset: 'auto' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                        , id: data[0].id //防止重复弹出，写主键Id
                        , content: '<iframe frameborder="0" width="100%" height="100%" src="send_sys_user_updaPwd"/>'
                        , end: function () {
                            //窗口关闭，刷新列表
                            table.reload("tableId", {});
                            top.layerFrameConfig.iframeUserModify == null;
                        }, success: function (layero, index) {
                            top.layerFrameConfig.iframeUserModify = {
                                layer_index: index,
                                layer_layero: layero,
                                data: data[0] //将数据保存到配置中，便于子页面获取
                            }
                        }
                    });
                } else {
                    layer.msg("请选择一条数据进行修改");
                }
            },
            reload: function () {
                var paramUserId = $('#paramUserId');
                var paramUserCode = $('#paramUserCode');
                var paramUserName = $('#paramUserName');
                var paramUserSex = $('#paramUserSex');
                var parampassword = $('#parampassword');
                var paramUserPhone = $('#paramUserPhone');
                var paramUserEmail = $('#paramUserEmail');
                var paramUserActivate = $('#paramUserActivate');


                //执行重载
                table.reload('tableId', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        userId: paramUserId.val(),
                        userCode: paramUserCode.val(),
                        userName: paramUserName.val(),
                        userSex: paramUserSex.val(),
                        userPassword: parampassword.val(),
                        userPhone: paramUserPhone.val(),
                        userEmail: paramUserEmail.val(),
                        userActivate: paramUserActivate.val()
                    }
                });
            }
        };
        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
</body>
</html>